<template>
	<view class="kvGroup">
		
		<div class="layui-form-item" v-for="( item , index) in myList" :key="index">
			
			<div class="layui-inline">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<div class="inputGroup">
						<view class="inputGroup-addon">
							{{keyName}}
						</view>
						<input type="text" :value="item[keyName]" :placeholder="index+1" @input="inputKey($event,index)" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			
			<div class="layui-inline">
				<div class="layui-input-inline">
					<div class="inputGroup">
						<view class="inputGroup-addon">
							{{valueName}}
						</view>
						<input type="text" :value="item[valueName]" @input="inputValue($event,index)" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			
			<div class="layui-inline">
				<text class="layui-icon layui-icon-add-circle"  @tap="add(index)"></text>
				<text class="layui-icon layui-icon-delete mr10" v-if="index > 0 || myList.length > 0" @tap="del(index)"></text>
			</div>
			
		</div>
		
		<input type="text" :name="name" :value="value" style="display: none;">
		
	</view>
</template>

<script>
	export default {
		name : "kvGroup" ,
		props:{
			list : {
				type : Array,
				default:function(e){
					return [] ;
				}
			},
			name : {
				type : String,
				default : "",
			},
			keyName : {
				type : String,
				default : "key",
			},
			valueName : {
				type : String,
				default : "value",
			}
		},
		created : function(e){
			this.setDefaultValue();
		},
		watch:{
			list : function(res){
				this.setDefaultValue();
			},
		},
		
		data() {
			return {
				value : "" ,
				myList : []
			};
		},
		
		methods:{
			
			setDefaultValue :function(res){
				if (this.list && typeof this.list == "string") {
					this.list = JSON.parse(this.list) ;
				}
				var list = this.list || [] ;
				if ( list.length == 0) {
					list.push(this.defaultEle(1));
				}
				this.myList = list ;
				this.setValue();
			},
			
			inputKey:function(e , index){
				this.myList[index][this.keyName] = e.detail.value ;
				this.setValue();
			},
			inputValue:function(e , index){
				this.myList[index][this.valueName] = e.detail.value ;
				this.setValue();
			},
			add:function(index){
				this.myList.splice(index+1,0, this.defaultEle(index+2));
				this.setValue();
			},
			del:function(index){
				this.myList.splice(index,1);
				this.setValue();
			},
			defaultEle:function(index){
				var json = {};
				json[this.keyName] = ""  ;
				json[this.valueName] = "" ;
				return json ;
			},
			
			setValue : function(){
				var myList = this.myList ;
				var list = [] ;
				for (var i = 0; i < myList.length; i++) {
					var cur = myList[i];
					if (cur[this.keyName]) {
						list.push(cur);
					}
				}
				this.value = JSON.stringify(list);
				console.log(this.value)
			},
			
		}
	}
</script>

<style scoped lang="scss">
.inputGroup .inputGroup-addon{
	width: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.layui-icon{
	font-size: 20px;
	cursor: pointer;
	&+.layui-icon{
		font-size: 23px;
		margin-left: 10px;
		position: relative;
		top: 1.5px;
	}
	&:hover{
		color: #000;
	}
}
</style>
